<template>
<div>

<el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>菜单管理</span>
	</div>

<el-tree :data="treedata" 
:expand-on-click-node="false"
class="tree"
node-key="id"
default-expand-all
:props="props1"
v-if="showTree"
:indent="40"
>
	<span class="custom-tree-node" slot-scope="{ node, data }">
	<span > {{ node.label }} </span>
	<span>
		<span class="mr10"> {{ data.href}} </span>
		<span class="mr10"> {{ data.sort}} </span>

		<span class="mr10">
			<span
			v-if="data.is_show == '1'"
			>显示</span>
			<span
			v-else
			class="red"
			>隐藏</span>
		</span>

      <el-button
        type="text"
        size="mini"
        @click="edit(data)">
        编辑
      </el-button>

      <el-button
        type="text"
        size="mini"
        @click="addInterface(data)">
        添加下级菜单
      </el-button>

      <el-button
        type="text"
        size="mini"
        v-if="data.id != '143bf2ef757b4f3f94f5d3de0cef7b06'"
        @click="deleteMenu(data)"
        >
        删除
      </el-button>
    </span>
	</span>
</el-tree>
</el-card>

<el-dialog
  title="菜单信息"
  :visible.sync="menuDialogVisible"
  width="600px">
  <el-form 
	:model="chooseMenu" 
	label-width="130px">

	<el-form-item label="上级菜单名称：" prop="name" 
	v-if="chooseMenu.id == undefined"
	>
		{{chooseMenuName}}
	</el-form-item>

	<el-form-item label="菜单名称：" prop="name" >
		<el-input v-model="chooseMenu.name" placeholder="请输入菜单名称" style="width:300px;"></el-input>
	</el-form-item>

	<el-form-item label="菜单地址：" prop="name" >
		<el-input v-model="chooseMenu.href" placeholder="请输入菜单地址" style="width:300px;"></el-input>
	</el-form-item>

	<el-form-item label="菜单图标：" prop="name" >
		<el-input v-model="chooseMenu.icon" placeholder="请输入菜单图标" style="width:300px;"></el-input>
	</el-form-item>

	<el-form-item label="是否显示：" prop="name" >
		<el-radio-group v-model="chooseMenu.is_show">
		    <el-radio :label="'1'">显示</el-radio>
		    <el-radio :label="'0'">隐藏</el-radio>
		</el-radio-group>
	</el-form-item>

	<el-form-item label="排序：" prop="name" >
		<el-input v-model="chooseMenu.sort" placeholder="排序" style="width:300px;"></el-input>
	</el-form-item>

	<!-- <el-form-item label="接口列表：" prop="name" >
		<el-tag
		  v-for="item, index in chooseMenu.interfaces"
		  :key="item.id"
		  type="danger"
		  class="mr10"
		  @close="handleClose(index)"
		  closable>
		  {{item.name}} {{item.id}}
		</el-tag>

		<el-input
		  class="input-new-tag"
		  v-if="inputVisible"
		  v-model="inputValue"
		  ref="saveTagInput"
		  size="small"
		  @keyup.enter.native="handleInputConfirm"
		  @blur="handleInputConfirm"
		>
		</el-input>
		<el-button v-else class="button-new-tag" size="small" @click="showInput">
		 粘贴要添加的接口地址 </el-button>

	</el-form-item> -->

  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="menuDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">保 存</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
// import { transData } from '../../config/util'
import http from '@/common/http'
import util from '@/common/util'

export default {
	
	name : 'menulist',
	
	data () {
		return {
		  	treedata : [],
		  	defaultProps: {
	          children: 'children',
	          label: 'label'
	        },
	        menuDialogVisible : false,

	        chooseMenu : {
	        	is_show : '1',
	        	//interfaces : [],
	        	sort : 0,
	        },

	        inputValue : '',
	        inputVisible : false,

	        chooseMenuId : '',
	        chooseMenuName : '',

	        showTree : false,

	        props1 : {
				label : 'name',
			},

		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			//'menuConfigList'
		]),
	},

	methods : {

		edit (item) {


			this.$http({
				fun : 'menuConfigList',
				id : item.id,
				cb : res => {
					console.log(res);
					this.chooseMenu = res[0];
					this.menuDialogVisible = true;
				}
			});

		},

		addInterface (item) {

			console.log(item);

			this.chooseMenuId = item.id;
			this.chooseMenuName = item.name;

			//当前要添加的菜单
			this.chooseMenu = {
	        	is_show : '1',
	        	parent_ids : item.parent_ids,
	        	sort : 0,
	        };

			this.menuDialogVisible = true;
		},


		showInput() {
	        this.inputVisible = true;
	        this.$nextTick(_ => {
	          this.$refs.saveTagInput.$refs.input.focus();
	        });
	    },

	    handleInputConfirm() {

	        let inputValue = this.inputValue;
	        if (inputValue) {

	          	let arr = inputValue.split('/');
	          	const length = arr.length;

	          	if(length < 3){
	          		this.$notify({
			          title: '警告',
			          message: '请输入 /api/xxxx/xxxx/xxxx/xxxx',
			          type: 'warning'
			        });
			        return;
	          	}

	          	const interfacestr = arr[length - 3] + '_' + arr[length - 2] + '_' + arr[length - 1];

	          	for(let i = 0; i < this.chooseMenu.interfaces.length; i++){
	          		if(this.chooseMenu.interfaces[i].id == interfacestr){
	          			this.$notify({
				          title: '警告',
				          message: '不要重复添加',
				          type: 'warning'
				        });
				        return;
	          		}
	          	}

	          	this.chooseMenu.interfaces.push({
	          		id: interfacestr,
	          		name: "新增",
	          	});
	        }
	        this.inputVisible = false;
	        this.inputValue = '';
	    },


	    save () {

	    	// let permissionstr = '';

	    	// if(this.chooseMenu.interfaces.length > 0){
	    	// 	this.chooseMenu.interfaces.forEach(item => {
		    // 		permissionstr += item.id + ',';
		    // 	})

		    // 	permissionstr = permissionstr.substring(0, permissionstr.length - 1);
	    	// }

	    	// console.log(permissionstr);

	    	let para = {
	    		fun : 'createMenu',
	    		id : this.chooseMenu.id,
	    		name : this.chooseMenu.name,
	    		href : this.chooseMenu.href,
	    		icon : this.chooseMenu.icon,
	    		is_show : this.chooseMenu.is_show,
	    		sort : this.chooseMenu.sort,
	    		//permission : permissionstr,
	    		cb : res => {
	    			console.log(res);
	    			this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
	    			this.chooseMenu = {
	    				is_show : '1',
	    				sort : 0,
	        			//interfaces : [],
	        		};
	    			this.menuDialogVisible = false;
	    			this.chooseMenuId = '';
	    			this.chooseMenuName = '';
	    			this.init();
	    		}
	    	};

	    	//添加接口
	    	if(this.chooseMenu.id == undefined){
	    		para['parent_id'] = this.chooseMenuId;
	    		para['parent_ids'] = this.chooseMenu.parent_ids + this.chooseMenuId + ',';
	    	}

	    	this.$http(para);
	    },

	    handleClose (index) {
	    	this.chooseMenu.interfaces.splice(index, 1);
	    },

	    init() {
	    	http({
				fun : 'menuConfigList',
				cb : res => {
					const result = this.$util.transData(res, 'id', 'parent_id', 'children');
					console.log(result);
					this.treedata = result;
					this.showTree = true;
				},
			});
	    },

	    deleteMenu (item) {

	    	this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	          	const para = {
		    		fun : 'deleteMenu',
		    		id : item.id,
		    		cb : res => {
		    			this.$notify.success({
		    				title : '成功',
		    				message : '删除成功',
		    			});
		    			this.chooseMenu = {
		    				is_show : '1',
	        				interfaces : [],
		    			};
		    			this.menuDialogVisible = false;
		    			this.chooseMenuId = '';
		    			this.chooseMenuName = '';
		    			this.init();
		    		},
		    		err : res => {
		    			this.$notify.error({
		    				title : '失败',
		    				message : res,
		    			});
		    		}
		    	};
		    	http(para);
	        }).catch(() => {
	                    
	        });

	    	

	    },

	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.button-new-tag {
    margin-right: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
  .input-new-tag {
    width: 200px;
    margin-right: 10px;
    vertical-align: bottom;
  }

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

.tree {
	/*width : 700px;*/
	/*padding :0 20px;*/
}
</style>
